12. Link to a Stylesheet

Link to a Stylesheet

For this exercise, you'll be linking a stylesheet to a familiar webpage from this lesson.

Do you remember this webpage from the very first video in this lesson?

Do you remember this webpage from the very first video in this lesson?

I've already provided you with the HTML and CSS in the downloadables section. It's your job to download the files and connect the stylesheet to the webpage.

<html>
<head>
  <title>Link to a Stylesheet Quiz</title>
  <!-- add link here -->
</head>
<body>
  <!-- ... -->
</body>
</html>

In the download, styles.css (the stylesheet) is conviently tucked away in a folder called css. So, you will need to draw upon your knowledge of paths in order to correctly link the stylesheet to the HTML. If you've done everything correctly, your link should be formatted like…

<link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">

How to Complete this Exercise

  1. Go into the workspace on this page
  2. Edit the index.html file by adding a link to the missing stylesheet.
  3. View index.html in the browser to see if the stylesheet was applied.
  4. Take a look at the solution.html file in the workspace to see how I did it.

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

  • Default file path:
  • Workspace type: html-live
  • Opened files (when workspace is loaded): n/a